/*
 * @Author: xiaosihan 
 * @Date: 2022-06-23 21:15:04 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-18 01:50:12
 */


import SpriteText from "../SpriteText";
import spriteTextBgPNG from "./spriteTextBg.png";
import icon2PNG from "./spriteTextBg.png";

/**
 * 文本弹窗
 * @export
 * @class SpriteText
 * @extends {ThreeSpritetext}
 */
export default class AreaName2 extends SpriteText {

    constructor(text = "SpriteText", textHeight?: number, color?: string) {
        super(text, textHeight);

        this.text = `${text}\n\n\n`;
        this.renderOrder = 100;
        // this.backgroundColor = "#ffffffaa";
        this.padding = 10;
        this.borderRadius = 4;
        this.borderWidth = 0;
        this.textHeight = 16;
        this.color = "#BD3E0D";

        // this.borderColor = "#fff";
        // this.color = "#000";

        if (this.material.map) {
            this.material.map.anisotropy = 16;
            this.material.transparent = true;
            // this.material.alphaTest = 0.3;
            this.material.depthTest = false;
        }
    }

    renderOrder = 10;

    static bgImage = (() => {
        const bgImage = new Image();
        bgImage.src = spriteTextBgPNG;
        return bgImage;
    })();

    static Icon1PNG = (() => {
        const img = new Image();
        img.src = icon2PNG;
        return img;
    })();

    _genCanvas() {
        //@ts-ignore
        super._genCanvas();
        this.scale.multiplyScalar(0.0005);
        if (this.parent) {
            this.scale.divide(this.parent.scale);
        }

        (async () => {
            while (!AreaName2.Icon1PNG.complete) {
                await new Promise(resolve => setTimeout(resolve, 200));
            }

            //@ts-ignore
            super._genCanvas();
            this.scale.multiplyScalar(0.0005);
            if (this.parent) {
                this.scale.divide(this.parent.scale);
            }

            //@ts-ignore
            const canvas = this._canvas as HTMLCanvasElement;
            const { width, height } = canvas;

            const ctx = canvas.getContext("2d")!;
            ctx.globalCompositeOperation = "destination-over";
            ctx.setTransform(1, 0, 0, 1, 0, 0);

            const { width: iconWidth, height: iconHeight } = AreaName2.Icon1PNG;
            ctx.drawImage(AreaName2.Icon1PNG, 0, 0, iconWidth, iconHeight, (width - iconWidth * 6) * 0.5 - 10, (height - (iconHeight * 6)) * 0.5 + 50, iconWidth * 6, iconHeight * 6);

            this.material.map!.needsUpdate = true;

        })();

    }










}